<template>
      <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-for="(item,index) in reduce" :key="index">
         <td>{{index + 1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.salary}}</td>
          <td>{{item.city}}</td>
          <td>
            <a href="javascript:" @click="del(index)">删除</a>
          </td>
      </tbody>
    </table>
</template>

<script>
export default {
   props : {
      reduce : {
         type : Array,
         required : true
      }
   },
   watch : {
      reduce : {
         deep : true,
         handler() {
            localStorage.setItem('studentList',JSON.stringify(this.reduce))
         }
      }
   },
   methods : {
      del(i) {
         this.reduce.splice(i,1)
         this.$emit('del',this.reduce)       
      }
   }
}
</script>

<style>

</style>